<template>
	<view class="">
		<!-- 金额 -->
		 <view class="const-cord">
		 	<view class="">
		 		<h2 class="bttext">+1362.00</h2>
		 		<view class="cordbox">
		 			<span class="flextoptextd" style="color:#dc8b60;">
		 				{{ snData.status_text }}
		 			</span>
		 			<span>{{ snData.build_address }}</span>
		 			<span style="color: #d6d6d7;">|</span>
		 			<span>{{ snData.room_name }}</span>
		 				<span style="color: #d6d6d7;">|</span>
		 			<span>{{ snData.money }}</span>
		 		</view>
		 		<view class="" style="color: #999;font-size: 24rpx; ">
		 		承租人（{{ snData.nickname }}）；租期（至{{snData.createtime}}）
		 		</view>
		 	</view>
		 </view>
		 <!-- 租金明细 -->
		 <view class="cord">
		 	<view class="cordflex">
				<h5 style="font-size: 28rpx;font-weight: 600;">租金明细</h5>
				<view class="cordflexy">
					修改
				</view>
		 	</view>
			<u-divider ></u-divider>
			<view class="flex" style="font-size: 25rpx; box-sizing: border-box; margin: 7rpx 0;padding: 0 40rpx; color: #8f6d5e;">
				<view  class="flex-centz">
					费用名称
				</view>
				<view class="flex-cent">
					单价（元）
				</view>
				<view class="flex-cent">
					数量
				</view>
				<view class="flex-centy">
					总价(元)
				</view>
			</view>
			<view class="flex" style="font-weight: 400;
font-size: 28rpx; box-sizing: border-box;margin: 7rpx 0;padding: 0 40rpx; color: #222222;" v-for="item in snData.money_data">
				<view class="flex-centz">
					{{ item.name }}
				</view>
				<view class="flex-cent">
					{{ item.money }}
				</view>
				<view class="flex-cent">
					{{ item.num }}
				</view>
				<view class="flex-centy">
					{{ item.num*item.money }}
				</view>
			</view>
			<view class="cordflex">
				<h6 style="font-weight: 500;font-size: 26rpx;">合计</h6>
				<view class="cordflexy">
					{{ snData.total_money }}
				</view>
			</view>
		 </view>
		
		<view class="fixedbutton">
			<view class="fixedbuttonz" @click="message()">
				通知客房缴费
			</view>
			<view class="fixedbuttony"  @click="xianxamoney">
				线下缴费
			</view>
		</view>
		<u-modal :show="show"  @confirm="show = false" @cancel="show = false" showCancelButton="true" confirmColor="#fe550d" :content='content'></u-modal> 
	</view>
</template>

<script>
import {  billInfo,sendBiaoMessage,offlinePayment } from '@/api/landlord.js'

	export default {
		data() {
			return {
				snData:{},
				showDropdown: false,
				currentTab: 0,
				show:false,
				moneylist:[
					{
						id:1,
						name:'水费',
						money:0,
						num:1,
					},
					{
						id:2,
						name:'电费',
						money:0,
						num:1,
					},
					{
						id:3,
						name:'物业费',
						money:0,
						num:1,
					},
					{
						id:4,
						name:'其他',
						money:0,
						num:1,
					}
				],
				content:'确认收取9月份房租吗',
			};
		},
		onLoad(options){
	
			this.init(options.id)
		},
		methods: {
			xianxamoney(){//线下


				offlinePayment({pay_log_id:this.snData.id}).then(res=>{
				uni.$u.toast(res.data.msg)

				})

			},
			message(e) {
			sendBiaoMessage({ pay_log_id:this.snData.id}).then(res => {
				uni.$u.toast(res.data.msg)
			})
		},
			init(e){
				billInfo({id:e}).then(res=>{
					console.log(res.data.data);
					this.snData=res.data.data
					this.moneylist.forEach(k=> {
							if (k.id==1) {
								k.num=1
								k.money=this.snData.money_electricity
							} else if (k.id==2) {
								k.num=1
								k.money=this.snData.money_water
							}else if (k.id==3) {
								k.num=1
								k.money=0
							}else if (k.id==4) {
								k.num=1
								k.money=this.snData.other_fee
							}
					});
				})

			},
			// 路由跳转
			jump(item) {
				uni.navigateTo({
					url:item
				});
			},
			handleTabClick(index) {
				if (this.currentTab === index) {
					this.showDropdown = !this.showDropdown;
				} else {
					this.currentTab = index;
					this.showDropdown = true;
				}
			},
			selectOption(option) {
				this.filterTabs[this.currentTab].value = option.value;
				this.showDropdown = false;
				// 处理筛选逻辑
			},
			closeDropdown() {
				this.showDropdown = false;
			},
			toShopDetail(item) {
				uni.navigateTo({
					url: `/pages/shop-detail/shop-detail?id=${item.id}`,
				});
			},
		},
	};
</script>

<style lang="less" scoped>
	.fixedbutton{
		position: fixed;
		height: 100rpx;
		// border: 1rpx solid red;
		width: 100%;
		display: flex;
		justify-content: center;
		box-sizing: border-box;
		bottom: 40rpx;
		left:0 ;
		.fixedbuttonz{
			width: 40%;
			border: 1rpx solid #fe5107;
			border-radius: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
				margin-right: 20rpx;
				color: #fe5107;
		}
		.fixedbuttony{
			margin-left: 20rpx;
			width: 40%;
			color: #fff;
			background-color: #f94d04;
			border-radius: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			
		}
	}
	.flex-cent{
		width: 25%;
		text-align: center;
	}
	.flex-centz{
		width: 25%;
		text-align: left;
	}
	.flex-centy{
		width: 25%;
		text-align: right;
	}
	.bttext{
		font-family: PingFangSC, PingFang SC;
	font-weight: 600;
	font-size: 72rpx;
	color: #222222;
	}
	.cord{
		margin-top: 20rpx;
		background-color: #fff;
				padding: 20rpx;
				box-sizing: border-box;
	}
	.flex{
		display: flex;
		height: 40rpx;
		box-sizing: border-box;
		align-items: center;
		justify-content: space-between;
	}
	.cordflex{
		display: flex;
		box-sizing: border-box;
		justify-content:space-between;
		padding: 0 40rpx ;
		height: 60rpx;
		// border: 1rpx solid red;
		align-items: center;
		
		.cordflexy{
			color: #ff7e48;
			font-size: 25rpx;
		}
	}
	.const-cord{
		height: 300rpx;
		text-align: center;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}
	.cordbox{
		margin: 32rpx 0 22rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		span{
			margin-left: 10rpx;
			color: #717171;
		}
	}
	.flextoptextd{
		display: flex;
		padding: 5rpx;
		border: 1rpx solid #fe9b70;
		background-color: #fff5f0;
		color: #dc8b60;
		font-size: 20rpx;
		margin-left: 10rpx;
	}
	
	
</style>